<template>
  <el-card class="demo-card">
    <template #header>
      <h3>表格组件</h3>
    </template>
    <div>组件描述</div>
  </el-card>
  <Table
    tableName="Table Name"
    help="This is a help message"
    :columns="columns"
    :fetchData="fetchData"
    :actions="actions"
  >
    <!-- <template #age="{ row }">
      <ElInput v-model="row.age" />
    </template> -->
    <template #actions>
      <ElButton>编辑</ElButton>
    </template>
  </Table>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import Table from "@/components/Basic/Table/index.vue";

const data = ref([]);
const columns = ref([
  {
    prop: "id",
    label: "ID",
  },
  {
    label: "个人信息",
    prop: "info",
    children: [
      {
        prop: "name",
        label: "姓名",
      },
      {
        prop: "age",
        label: "年龄",
        // render: ({ row }) => {
        //   return <div style="color:red">{row.age}</div>;
        // },
      },
      {
        prop: "sex",
        label: "性别",
      },
    ],
  },

  {
    prop: "address",
    label: "地址saddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd",
  },
]);
const actions = ref([
  {
    label: "操作1",
    handler: (row) => {
      console.log(row);
    },
  },
  {
    label: "操作2",
    handler: (row) => {
      console.log(row);
    },
  },
]);

for (let i = 0; i < 100; i++) {
  data.value.push({
    id: i,
    name: `name${i}`,
    age: i,
    sex: i % 2 === 0 ? "男" : "女",
    address: `address${i}`,
  });
}

function fetchData(page, pageSize) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        list: data.value.slice((page - 1) * pageSize, page * pageSize),
        total: 100,
      });
    }, 1000);
  });
}
</script>

<style scoped>
.drag-item {
  min-height: 50px;
  outline: 1px dashed;
}

.drag-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-color);
  padding: 0 5px;
}
.drag-item .el-checkbox {
  overflow: hidden;
}
.drag-item .el-checkbox :deep(.el-checkbox__label) {
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
